import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { CheckCircleFilled } from '@ant-design/icons-vue'
import { Button, theme } from 'ant-design-vue'

@Component
export class SuccessComponent extends Render {
    @Prop({ default: '开通成功' }) text?: string
    @Prop({ default: '' }) hint?: string
    @Prop({ default: '返回上一页' }) buttonText?: string
    @Prop({ default: () => {} }) click?: () => void

    theme = theme.useToken()

    onHandleClick() {
        this.click?.() ?? this.$router.go(-1)
    }

    render() {
        console.log(theme)
        return (
            <div class="flex flex-col justify-center items-center">
                <CheckCircleFilled style={{ color: '#00D679', fontSize: '63px' }} />
                <div class="mt-20px text-lg text-black-100">{this.text}</div>
                <div class="mt-4px mb-32px text-base text-black-300">{this.hint}</div>
                <Button type="primary" onClick={this.onHandleClick}>
                    {this.buttonText}
                </Button>
            </div>
        )
    }
}

export default toNative<
    { text?: string; hint?: string; buttonText?: string; click?: () => void },
    {}
        >(SuccessComponent)
